<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :label-width="120"
        :model="form"
        :rules="rules"
    >
        <n-form-item label="所属模块" path="ofModule">
            <jb-select
                v-model:value="form.ofModule"
                clearable
                url="/api/admin/modules"
            ></jb-select>
        </n-form-item>
        <n-form-item label="上级资源" path="pid">
            <jb-tree-select
                v-model:value="form.pid"
                clearable
                url="/api/admin/permission/datas"
                check-strategy="all"
                :show-path="true"
            ></jb-tree-select>
        </n-form-item>
        <n-form-item label="资源名称" path="name">
            <n-input v-model:value="form.name" placeholder="请输入权限资源名称" />
        </n-form-item>
        <n-form-item label="资源KEY" path="permissionKey">
            <n-input v-model:value="form.permissionKey" placeholder="请输入权限KEY" />
        </n-form-item>
        <n-form-item label="菜单图标" path="icons">
            <n-input
                v-model:value="form.icons"
                placeholder="请输入菜单图标，只支持iconify图标"
            />
            <jb-btn
                icon="line-md:iconify1"
                type="primary"
                tip-text="点此去查找"
                size="large"
                url="https://icon-sets.iconify.design/"
                :is-link-btn="true"
                circle
                quaternary
            ></jb-btn>
        </n-form-item>
        <n-form-item label="资源地址" path="url">
            <n-input v-model:value="form.url" placeholder="请输入资源地址" />
        </n-form-item>

        <n-form-item label="是否是菜单" path="isMenu">
            <n-radio-group v-model:value="form.isMenu">
                <n-radio :value="true"> 是 </n-radio>
                <n-radio :value="false"> 否 </n-radio>
            </n-radio-group>
        </n-form-item>
        <n-form-item label="打开类型" path="openType">
            <n-radio-group v-model:value="form.openType">
                <n-radio :value="1"> 系统默认 </n-radio>
                <n-radio :value="2"> iframe </n-radio>
                <n-radio :value="3"> Dialog </n-radio>
                <n-radio :value="4"> Layer </n-radio>
                <n-radio :value="5"> 浏览器新窗口 </n-radio>
            </n-radio-group>
        </n-form-item>
        <n-form-item
            v-if="form.openType == 2 || form.openType == 5"
            label="是否在url后自动拼接token"
            path="openOption.urlWithToken"
        >
            <n-radio-group v-model:value="form.openOption.urlWithToken">
                <n-radio :value="true"> 是 </n-radio>
                <n-radio :value="false"> 否 </n-radio>
            </n-radio-group>
        </n-form-item>

        <n-form-item label="是否超级管理员默认可用" path="isSystemAdminDefault">
            <n-radio-group v-model:value="form.isSystemAdminDefault">
                <n-radio :value="true"> 是 </n-radio>
                <n-radio :value="false"> 否 </n-radio>
            </n-radio-group>
        </n-form-item>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id: string
        pid?: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface PermissionType {
    id: string
    name: string
    ofModule: string
    pid: string
    icons: string
    url: string
    permissionKey: string
    isMenu: boolean
    openOption?: any
    openType: 1 | 2 | 3 | 4 | 5
    isSystemAdminDefault: boolean
}
const form = useResetableData<PermissionType>({
    id: '',
    ofModule: '1',
    name: '',
    pid: '',
    icons: '',
    url: '',
    permissionKey: '',
    isMenu: true,
    openType: 1,
    openOption: {
        urlWithToken: false
    },
    isSystemAdminDefault: true
})
const rules: FormRules = {
    name: new Rules().required('请输入权限资源名称').value,
    ofModule: new Rules().required('请选择所属模块').value,
    permissionKey: new Rules().required('请输入权限Key').value
}

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = props.id ? '/api/admin/permission/update' : '/api/admin/permission/save'
    let data = { ...form }
    if (form.openType != 2 && form.openType != 5) {
        delete data.openOption
    } else {
        data.openOption = JSON.stringify(data.openOption)
    }
    let res = await JBoltApi.tryPost(url, data)
    await window.$success('保存成功')
    return res.data
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/permission/${props.id}`).then(
        ({ error, result }) => {
            if (error) return
            result.data.ofModule = result.data.ofModule + ''
            if (result.data.openOption) {
                result.data.openOption = JSON.parse(result.data.openOption)
            } else {
                result.data.openOption = {
                    urlWithToken: false
                }
            }
            form._reset(result.data)
        }
    )
}

onMounted(() => {
    if (props.id) {
        loadEditData()
    }
    if (props.pid) {
        form.pid = props.pid
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
